.circle {
    background: rgb(255,255,255);
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    width: 12em;
    height: 12em;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

    .circle:hover {
        background-image:url(../images/3.jpg);
    }

    .circle p {
        line-height:25px;
        margin-top:40px;
        text-align:center;
        color:gray;
    }

    .circle:before,
    .circle:after {
        border-radius: 100%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        box-shadow: inset 8.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 8.6em 0 rgba(30, 140, 209, 0.2), inset -8.6em 0 0 rgba(30, 140, 209, 0.2), inset 0 -8.6em 0 rgba(30, 140, 209, 0.2);
        -webkit-transition: box-shadow 0.75s;
        -moz-transition: box-shadow 0.75s;
        -ms-transition: box-shadow 0.75s;
        transition: box-shadow 0.75s;
    }

    .circle:after {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .circle:hover:before,
    .circle:hover:after {
        box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.86em 0 rgba(252, 150, 0, 0.5), inset -0.86em 0 0 rgba(0, 255, 0, 0.5),inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
    }

    .circle:hover > p {
        display:none;
    }
